<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>添加景点</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}"  media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">添加景点</div>
                <div class="layui-card-body" pad15>

                    <div class="layui-form" lay-filter="">

                        <div class="layui-form-item">
                            <label class="layui-form-label">景点图片</label>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1" name="img">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="demo1">
                                    <p id="demoText" class="layui-upload-text"></p>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">景点名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" required  lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">价格</label>
                            <div class="layui-input-inline">
                                <input type="text" name="price" lay-verify="number" placeholder="请输入价格" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">库存</label>
                            <div class="layui-input-inline">
                                <input type="text" name="stock" lay-verify="number" placeholder="请输入库存" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">国家地区</label>
                            <div class="layui-input-inline">
                                <input type="text" name="contry" lay-verify="required" placeholder="请输入国家地区" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">出发时间</label>
                            <div class="layui-input-inline">
                                <input type="date"  name="startdate" required  lay-verify="date" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-form-item">
                        <label class="layui-form-label">景点描述</label>
                        <div class="layui-input-inline">
                        <input type="text" name="miaoshu" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">详细描述</label>
                            <div class="layui-input-block">
                                <textarea name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layuiadmin/layui/layui.js}" src="../../../layuiadmin/layui/layui.js"></script>

<script>
    layui.use(['form', 'upload', 'laydate'] ,function(){

        var form = layui.form
            ,$ = layui.jquery
            ,layer = layui.layer
            ,upload = layui.upload
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/uploadFile'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                return layer.msg('上传成功');
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(setmyinfo)', function(obj){

            $.ajax({
                type: "POST",
                url: "/scenic",
                data: JSON.stringify(obj.field),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function(result) {
                    if(result.code == 0) {

                        //登入成功的提示
                        layer.msg(
                            result.message,{
                                icon: 1
                            });
                    } else {
                        layer.msg(result.message, {
                            icon: 7
                        });
                    }
                }
            });

            //  return layer.msg(JSON.stringify(data.field));
        });

    });
</script>
</body>
</html>